<template>
	<basic-container>
		<div class="main_title warn_f"><b>工作流信息</b></div>
		<el-divider></el-divider>
		<div class="mb20">
			<div class="mb20">
				<span class="index_num warn_bg">1</span>
				<b>工作流</b>
			</div>
			<div class="mb20 flex_around pub_center deepgray_f steps">
				<div class="flex_center" style="align-items: center;">
					<div class="f20"><b>①</b></div>
					<div class="f16">编制</div>
				</div>
				<i class="el-icon-arrow-right f24 gray_f"></i>
				<div class="flex_center" style="align-items: center;">
					<div class="f20"><b>②</b></div>
					<div class="f16">审核</div>
				</div>
				<i class="el-icon-arrow-right f20 gray_f"></i>
				<template v-if="isOnlineReview">
					<div class="flex_center" style="align-items: center;">
						<div class="f20"><b>③</b></div>
						<div class="f16" style="max-width:50px;">增加审批</div>
					</div>
					<i class="el-icon-arrow-right f20 gray_f"></i>
				</template>
				<div class="flex_center" style="align-items: center;">
					<div class="f20">
						<b>{{ isOnlineReview ? '④' : '③' }}</b>
					</div>
					<div class="f16">批准</div>
				</div>
			</div>
		</div>
		<div>
			<div class="mb20">
				<span class="index_num warn_bg">2</span>
				<b>签名人员</b>
			</div>
			<div class="flex_start mb20">
				<el-checkbox class="" size="small" v-model="isOnlineReview" label="增加更多审批" border></el-checkbox>
				<el-button type="primary" size="small" @click="addSign()" v-if="isOnlineReview">添加</el-button>
			</div>
			<div class="f14" v-for="(item, index) in guifanFilesProcessRecordList" :key="index">
				<div class="flex_start mb20" v-if="item.type == 0">
					<div>编制人：</div>
					<div class="border deepgray_f flex_item">{{ item.userName }}</div>
				</div>
				<div class="flex_start mb20" v-if="item.type == 1">
					<div>审核人：</div>
					<el-select class="flex_item" placeholder="请选择" v-model="item.userId" size="small" filterable @change="setSignItem($event, item)">
						<el-option v-for="(item, i) in Alluser" :key="i" :value="item.value" :label="item.label"></el-option>
					</el-select>
				</div>
				<div class="mb20 flex_between" v-if="item.type == 3">
					<div class="flex_item" style="padding-right: 40px;">
						<el-select style="width: 100%;" v-model="item.userId" placeholder="请输入/选择审批人" filterable size="small" class="mb20" @change="setSignItem($event, item)">
							<el-option v-for="(v, i) in Alluser" :key="i" :value="v.value" :label="v.label"></el-option>
						</el-select>
						<div class="flex_start">
							<div>签名文件：</div>
							<el-select placeholder="请选择" v-model="item.filesId" size="small" filterable class="flex_item" multiple>
								<el-option v-for="(v, i) in fileList" :key="i" :value="v.id" :label="v.name"></el-option>
							</el-select>
						</div>
					</div>
					<i class="el-icon-delete error_f f18 pointer ml10" @click="delSign(index)"></i>
				</div>
				<div class="flex_start mb20" v-if="item.type == 4">
					<div>批准人：</div>
					<el-select class="flex_item" placeholder="请选择" v-model="item.userId" size="small" filterable @change="setSignItem($event, item)">
						<el-option v-for="(v, i) in Alluser" :key="i" :value="v.value" :label="v.label"></el-option>
					</el-select>
				</div>
			</div>
		</div>
	</basic-container>
</template>

<script>
export default {
	props: {
		formList: []
	},
	data() {
		return {
			Alluser: [],
			fileList: [],
			guifanFilesProcessRecordList: [
				{
					userId: '',
					userName: '',
					type: 0
				},
				{
					userId: '',
					userName: '',
					type: 1
				},
				{
					userId: '',
					userName: '',
					type: 4
				}
			],
			isOnlineReview: false
		};
	},
	created() {
		this.getAlluser();
		this.guifanFilesProcessRecordList[0].userName = `${this.userInfo.deptName}/${this.userInfo.postName}/${this.userInfo.real_name}`;
		this.guifanFilesProcessRecordList[0].userId = this.userInfo.user_id;
	},
	watch: {
		isOnlineReview(newval) {
			if (!newval) {
				let onlineReview = this.guifanFilesProcessRecordList.filter(item => item.type == 3);
				this.guifanFilesProcessRecordList.splice(2, onlineReview.length);
			} else {
				this.addSign();
			}
		},
		formList: {
			handler(val) {
				if (val[0].jiluFileList.length != 0) {
					let array = [];
					for (let i = 0; i <= val.length - 1; i++) {
						array = array.concat(val[i].jiluFileList);
						if (i == val.length - 1) {
							this.fileList = array;
						}
					}
				}
			},
			deep: true
		}
	},
	methods: {
		//   设置 记录人
		setSignItem(id, item) {
			let checkItem = this.Alluser.find(e => id == e.value);
			item.deptId = checkItem.deptId;
			item.userName = checkItem.label;
			console.log(this.guifanFilesProcessRecordList);
		},
		setProcessRecord(array) {
			for (let i = 0; i <= array.length - 1; i++) {
				let item = array[i];
				item.userName = `${item.createDeptName}/${item.postName}/${item.createUserName}`;
				if (item.type == 3 && item.userId) {
					this.isOnlineReview = true;
				}
			}
			this.guifanFilesProcessRecordList = array;
		},
		// 签名
		addSign() {
			// this.isOnlineReview = true;
			let index = this.guifanFilesProcessRecordList.length - 1;
			this.guifanFilesProcessRecordList.splice(index, 0, {
				deptName: '',
				userName: '',
				userId: '',
				deptId: '',
				type: 3,
				filesId: ''
			});
		},
		//  删除签名
		delSign(i) {
			this.guifanFilesProcessRecordList.splice(i, 1);
			let index = this.guifanFilesProcessRecordList.findIndex(item => item.type == 3);
			index > 0 ? (this.isOnlineReview = true) : (this.isOnlineReview = false);
		},
		beforeSubmit() {
			for (let i = 0; i <= this.guifanFilesProcessRecordList.length - 1; i++) {
				let item = this.guifanFilesProcessRecordList[i];
				item.sort = i;
				if (item.type == 1 && !item.userId) {
					this.$message.error('请选择审核人员');
					return false;
				}
				if (item.type == 4 && !item.userId) {
					this.$message.error('请选择批准人员');
					return false;
				}
				if (this.isOnlineReview && item.type == 3 && !item.userId) {
					this.$message.error('请选择记录责任人');
					return false;
				}
				if (this.isOnlineReview && item.type == 3 && !item.filesId) {
					this.$message.error('请选择所需审批记录文件');
					return false;
				}
			}
			return true;
		}
	}
};
</script>

<style lang="scss" scoped="scoped">
.border {
	border: 1px solid #dcdfe6;
	border-radius: 4px;
	line-height: 32px;
	padding: 0 10px;
}
</style>
